Style Sheets

The Style menu allows you to change the appearance of your documents by two different means:

• using Cascading Style Sheets (CSS),
• using HTML elements and attributes.

The first entries of the Style menu are dedicated to CSS, the last two entries to HTML elements.

Cascading Style Sheets

Creating and updating Style attributes

Each of the first four entries of the Style menu call a dialog box that allows you to associate a style attribute with the currently selected elements:

• Character Style allows you to choose the font family, the character style, the body size and the underline style.
• Colors allows you to choose the foreground and background colors from a palette. Click on a palette cell with the left button to set the foregroud color, click with the middle button to set the backgroud color.
• Format allows you to set alignment, indentation, justification and linespacing.
• Background Image allows you to choose a background image and its repeat mode.

In all these dialog boxes, Default buttons allow you to remove the corresponding style information from the selected elements.

All modifications made with these dialog boxes can be viewed immediately in both the WYSIWYG view and the Structure view.

Changing width and height of elements

The width and height of any element in a document can be changed interactively, in the same way as image map areas. By pressing the Control key on the keybord and the middle button of the mouse, you can resize the box associated with the element under the cursor. When you release the mouse button, the element size is changed and a style attribute is associated with the element.

When the resized element is an image, this image is zoomed to fill its new box.

Creating, updating and using classes

When a style attribute has been associated with an element, you can use that element as a model for creating or modifying a style rule. Select this element (you must select only one element and this element must have a style attribute) and choose Create Rule from the Style menu. A dialog box pops up that displays a list of CSS selectors. This list comprises all classes that are defined for the current document as well as, the element types to which some style is associated.. Choose a selector in this list or enter a new class name or type name and press the Confirm button. The style of the selected element is then associated with the chosen selector and the style attribute is removed from the selected element. Its content is moved to the STYLE element, in the document HEAD, and all elements matching the selector are displayed with the new style.

When you have created new classes with the Create Rule command, you can associate these classes with some elements in the document document. Choose Apply Class from the Style menu. A dialog box pops up which displays all existing classes. Choose one of these classes. The selected elements are then displayed with the style associated with the chosen class.

To associate a class with an element, you can also use the Attributes menu. This menu allows you to delete a class attribute from an element or to change it: the class attribute is handled like any other attribute.

Editing style sheets

Commands Create Rule and Apply Class provide the basic functionality for manipulating style information. More complex manipulations can be made with the CSS dialog box. You can get that dialog box by clicking the CSS button or by selecting Style sheets from the Style menu.

The CSS dialog box allows you not only to edit the content of a style sheet, but also to create new sheets and to update existing ones by copying rules from one sheet to another.

• The two CSS file selectors allow to select the style sheets from which rules can be manipulated. In each selector, the currently selected sheet is highlighted.

  Entry Document style represents the set of rules gathered in the STYLE element, in the document HEAD.

  Entry User's preference represents the user style sheet (file .amaya.css in the user's home directory)

• The two rule selectors show the rules from the selected style sheets. In fact, they only display the selector part of these rules. Only one rule can be selected for both selector, which is the current rule, displayed in the text area below.
• The text area at the bottom shows the complete current rule (the one selected from the rule selectors), allowing the user to see and edit the CSS syntax.
• Between the two rule selectors there is a column of 5 buttons.
  • pushing the button merges the current rule (as shown in the text area) to the second style sheet. Changes are immediately reflected in the WYSIWYG View.
  • pushing the button copies the current rule to the second style sheet.The difference with the previous button is that all rules using the same selector initially present in the file are first removed.
  • pushing the button deletes the current rule from its style sheet.
  • the buttons and have the same effect as the first two buttons but they act on the first style sheet..
• The five buttons at the bottom are used for handling style sheets.
  • Save initiates the operation of saving all modified style sheets.
  • Save as saves one of the style sheets to a local file.
  • Reload is a coarse grained Undo. It reloads all the modified style sheets referenced by the document.
  • New adds an external style sheet to the list of the external style sheets referenced by the document. It is also possible to browse the content of a file without attaching it to the document. Amaya keeps an history of the style sheets encountered. This history is saved from session to session, and allows you to grab quickly one of the style sheets lastly referenced, to browse its rules or to attach it to the current document.
  • Remove supresses a reference to an external style sheet.
  • Cancel closes the CSS dialog box.

Style through HTML elements

HTML provides some character-level elements that allow you to associate style with character strings. Two entires from the Style menu allow you to handle these HTML elements.

Creating HTML style elements

Entry Information type from the Style menu presents a submenu offering a choice of HTML elements that define abstract styles. Select first a character string and then choose an item in this menu. The selected character string receives the corresponding style. Three of these styles are also available through buttons: emphasis (button i), strong (button B) and code (button TT).

Entry Character elements from the Style menu offers another menu for changing the style of text. Most entries of this menu could be replaced by CSS and should not be used. They are here only for the sake of completeness of the HTML 3.2 implementation.

Removing style

To remove style from a character string, select the string first and re-apply the command that was used for associating the style you want to remove. All commands in the submenus Information Type and Character Element toggle themselves if re-applied.

---